<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		#tutorial {
			border: 1px solid black;
			margin-left: 400;
		}
	</style>
	<body>
		<canvas id="tutorial" width="600" height="300"></canvas>
		<script type="text/javascript">
			let canvas = document.getElementById("tutorial");
			let ctx = canvas.getContext("2d");
			let raf = null;
			let running = false;
			let ball = {
				x:100,
				y:100,
				radius:25,
				color:"#ec9922",
				vx:5,
				vy:2,
				draw:function(){
					ctx.beginPath();
					ctx.arc(this.x,this.y,this.radius,0,2*Math.PI);
					ctx.fillStyle = this.color;
					ctx.fill();
				}
			}
			function clear(){
				ctx.fillStyle = 'rgba(255,255,255,0.3)';
				ctx.fillRect(0,0,canvas.width,canvas.height);
			}
			function draw(){
				clear();
				ball.draw();
				ball.x += ball.vx;
				ball.y += ball.vy; 
				if((ball.x + ball.vx > canvas.width) || (ball.x + ball.vx < 0) ){
					ball.vx = - ball.vx
				}
				if((ball.y + ball.vy > canvas.height) || (ball.y + ball.vy < 0) ){
					ball.vy = - ball.vy
				}
				raf = window.requestAnimationFrame(draw);
			}
			canvas.addEventListener('mousemove', function(e){
				if(!running){
					clear();
					ball.x = e.clientX;
					ball.y = e.clientY;
					ball.draw();
				}
			  clear();
			  ball.x = e.clientX;
			  ball.y = e.clientY;
			  ball.draw();
			});
			canvas.addEventListener('click',function(e){
			  if (!running) {
			    raf = window.requestAnimationFrame(draw);
			    running = true;
			  }
			});
			canvas.addEventListener('mouseout', function(e){
			  window.cancelAnimationFrame(raf);
			  running = false;
			});
			ball.draw();
		</script>
	</body>
</html>
